<template>
  <div class="dashboard-container">
    <el-card style="height: 100px">
      <div class="menu_btn">
        <el-link href="javascript:;" @click="openDialog()" :underline="false">
          <el-avatar shape="square" class="blue">
            <el-icon><Plus /></el-icon>
          </el-avatar>
          <span>创建应用</span>
        </el-link>
      </div>
      Yaconf<span style="font-size: 12px" ml-1
        >( 版本: {{ yacInfo.config_version }} )</span
      >
      <div style="display: inline-block; font-size: 14px" ml-8>
        <span>{{ yacInfo.config_directory }}</span>
        <el-divider direction="vertical" />
        <span>{{ yacInfo.config_check_delay }}</span>
      </div>
    </el-card>
    <el-card mt-5>
      <el-table
        :data="pageData"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" width="120" fixed>
          <template #default="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column property="app_id" label="AppID" />
        <el-table-column property="app_name" label="AppName" />
        <el-table-column
          label="应用名称"
          width="240"
          fixed
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-link :href="'#/config/index?id=' + scope.row.id" type="primary">
              {{ scope.row.title }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="应用类型" width="120" fixed>
          <template #default="scope">
            <el-tag
              v-if="scope.row.type == 1"
              key="WEB"
              type="primary"
              effect="dark"
              round
            >
              WEB
            </el-tag>
            <el-tag
              v-if="scope.row.type == 2"
              key="APP"
              type="success"
              effect="dark"
              round
            >
              APP
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="create_author" label="创建人" />
        <el-table-column property="created_at" label="添加时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              title="编辑"
              type="primary"
              circle
              @click="openDialog(scope.row.id)"
              icon="edit"
            />
            <el-button
              size="small"
              title="删除"
              icon="delete"
              circle
              @click="handleAppDelete(scope.row.id)"
              type="danger"
            />
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.p"
        v-model:limit="queryParams.limit"
        @pagination="handleQuery"
      />
    </el-card>
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="550">
      <el-form :model="appForm" ref="appFormRef" :rules="appRules">
        <el-form-item
          label="应用名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input v-model="appForm.title" placeholder="请输入应用名称" />
        </el-form-item>
        <el-form-item
          label="APP NAME"
          :label-width="formLabelWidth"
          prop="app_name"
        >
          <el-input v-model="appForm.app_name" placeholder="请输入APP NAME" />
        </el-form-item>
        <el-form-item
          label="应用类型"
          :label-width="formLabelWidth"
          prop="type"
        >
          <el-select v-model="appForm.type" placeholder="请选择应用类型">
            <el-option label="WEB" :value="1" />
            <el-option label="APP" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
import { getInfo } from "@/api/database";
import {
  getAppPage,
  getAppForm,
  addApp,
  updateApp,
  deleteApp,
} from "@/api/application";
import { AppQuery, AppPage, AppForm } from "@/api/application/types";
const dialogFormVisible = ref(false);
const dialogTitle = ref("");
const formLabelWidth = "140px";
const appFormRef = ref(ElForm); // 用户表单
const loading = ref(false);
const yacInfo = ref<any>({
  config_version: "",
  config_directory: "",
  config_check_delay: "",
});
const appForm = reactive<AppForm>({
  sort: 0,
});
const appRules = reactive({
  title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  app_name: [{ required: true, message: "app name不能为空", trigger: "blur" }],
  type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
});
const pageData = ref<AppPage[]>();
const total = ref(0);
const queryParams = reactive<AppQuery>({
  p: 1,
  limit: 10,
});
/**
 * 打开弹窗
 * @param id 用户ID
 */
async function openDialog(id?: number) {
  dialogFormVisible.value = true;
  if (id) {
    dialogTitle.value = "编辑应用";
    getAppForm(id).then(({ data }) => {
      Object.assign(appForm, { ...data });
    });
  } else {
    dialogTitle.value = "创建应用";
  }
}

/** 行选中 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

function getYacInfo() {
  getInfo()
    .then(({ data }) => {
      yacInfo.value = data;
    })
    .finally(() => {});
}

const handleSubmit = useThrottleFn(() => {
  appFormRef.value.validate((valid: any) => {
    if (valid) {
      const ids = appForm.id;
      loading.value = true;
      if (ids) {
        updateApp(appForm)
          .then(() => {
            ElMessage.success("修改成功");
            closeDialog();
          })
          .finally(() => (loading.value = false));
      } else {
        addApp(appForm)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialog();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}, 3000);

/**
 * 关闭弹窗
 */
function closeDialog() {
  dialogFormVisible.value = false;
  appFormRef.value.resetFields();
  appFormRef.value.clearValidate();
  appForm.id = undefined;
  handleQuery();
}

function handleQuery() {
  loading.value = true;
  getAppPage()
    .then(({ data }) => {
      pageData.value = data.items;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

//删除
function handleAppDelete(id?: number) {
  const ids = id || removeIds.value;
  if (!ids) {
    ElMessage.warning("请勾选要删除的数据");
    return;
  }
  ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    deleteApp({ ids: ids }).then(() => {
      ElMessage.success("删除成功");
      handleQuery();
    });
  });
}

onMounted(() => {
  getYacInfo();
  handleQuery();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  margin-top: 50px;
  padding: 24px;
  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
  .box-card {
    text-align: center;
    font-size: 12px;
  }
  .menu_btn {
    display: inline-block;
    font-size: 14px;
    margin-left: 0;
    padding: 10px 55px 10px 10px;
    margin-bottom: 5px;
    border-radius: 5px;
  }
  .sky-blue {
    background-color: #3fc2f7;
  }
  .deep-blue {
    background-color: #4752e8;
  }
  .e158a6 {
    background-color: #e158a6;
  }
  .d6c1 {
    background-color: #33d6c1;
  }
  .purple {
    background-color: rgb(179, 127, 235);
  }
  .blue {
    background: #409eff;
  }
  .green {
    background-color: #67c23a;
  }
  .red {
    background-color: #f56c6c;
  }
  .yellow {
    background-color: #e6a23c;
  }
  .menu_btn span {
    margin-left: 8px;
  }
  .menu_btn:hover {
    background-color: #f2f2f2;
  }
  .el-link:hover {
    color: #000000;
  }
  .carousel-item {
    color: #475669;
    opacity: 0.75;
    margin: 0;
    text-align: center;
  }
}
</style>
